<template>
  <!-- 首页 -->
  <div class="index">
    <!-- 顶部栏 -->
    <div class="header">
      <div class="logo">
        <span class="iconfont iconnew"></span>
      </div>
      <div class="search" @click="$router.push({ name: 'search' })">
        <van-icon name="search" />
        <span>搜索商品</span>
      </div>
      <div class="user" @click="$router.push({ path: `/personal/${id}` })">
        <van-icon name="manager-o" />
      </div>
    </div>
    <!-- 标签页 -->
    <van-tabs swipeable v-model="active" background="#ccc" sticky>
      <van-tab v-for="value in call" :key="value.id" :title="value.name">
        <van-list
          v-model="value.loading"
          :finished="value.finished"
          finished-text="没有更多了"
          @load="onLoad"
          :immediate-check="false"
        >
          <van-pull-refresh v-model="value.isLoading" @refresh="onRefresh">
            <articleBlock
              v-for="(item, i) in value.postlist"
              :key="i"
              :post="item"
            ></articleBlock>
          </van-pull-refresh>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { mycategory } from "@/apis/category.js";
import { mypost } from "@/apis/post.js";
import articleBlock from "@/components/articleBlock.vue";
export default {
  data() {
    return {
      call: [],
      active: 0,
      id: "",
    };
  },
  components: {
    articleBlock,
  },
  async activated() {
    document.querySelector(".van-sticky").onclick = (e) => {
      console.log(e.target.className);
      if (e.target.className == "van-sticky") {
        this.$router.push({ name: "management" });
      }
    };
    this.id = await JSON.parse(localStorage.getItem("id") || "{}");

    this.call = JSON.parse(localStorage.getItem("column_remove"));
    if (!this.call) {
      let res = await mycategory();
      this.call = res.data.data;
    } else {
      if (localStorage.getItem("mytoken")) {
        this.call.unshift(
          {
            id: 0,
            name: "关注",
            is_top: 1,
          },
          {
            id: 999,
            name: "头条",
            is_top: 1,
          }
        );
      } else {
        this.call.unshift({ id: 999, name: "头条", is_top: 1 });
      }
      this.$nextTick(() => {
        this.active = localStorage.getItem("mytoken") ? 1 : 0;
      });
      this.call = this.call.map((v) => {
        return {
          ...v,
          postlist: [], // 添加了存储这个栏目新闻数据的数组
          pageIndex: 1, // 当前栏目的页码
          pageSize: 4, // 当前栏目每页显示的数量
          loading: false, // 当前栏目的上拉加载的状态，为true说明正在加载中
          finished: false, // 当前栏目数据是否全部加载完毕，为true说明没有更多数据了
          isLoading: false, //当前栏目的下拉加载的状态，为true说明正在加载中
        };
      });
      this.init();
    }
  },
  watch: {
    active() {
      if (this.call[this.active].postlist.length == 0) {
        this.init();
      }
    },
  },
  methods: {
    onLoad() {
      this.call[this.active].pageIndex++;
      setTimeout(() => {
        this.init();
      }, 2000);
    },
    onRefresh() {
      this.call[this.active].postlist.length = 0;
      this.call[this.active].pageIndex = 1;
      this.call[this.active].finished = false;
      setTimeout(() => {
        this.init();
      }, 2000);
    },
    async init() {
      let res2 = await mypost({
        category: this.call[this.active].id,
        pageIndex: this.call[this.active].pageIndex,
        pageSize: this.call[this.active].pageSize,
      });
      this.call[this.active].postlist.push(...res2.data.data);
      this.call[this.active].loading = false;
      //res2.data.data.length 这个是加载后每次放入 this.call[this.active].postlist 之中的数量
      if (res2.data.data.length < this.call[this.active].pageSize) {
        this.call[this.active].finished = true;
      }
      this.call[this.active].isLoading = false;
    },
  },
};
</script>
<style lang="less" scoped>
.index {
  .header {
    height: 40px;
    display: flex;
    justify-content: space-between;
    background-color: #f00;
    align-items: center;
    color: #fff;
  }

  .search {
    flex: 1;
    height: 30px;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 15px;
    text-align: center;
    line-height: 30px;
    .van-icon {
      font-size: 16px;
    }
  }

  .van-icon {
    font-size: 24px;
    padding: 0 10px;
  }

  .iconfont {
    font-size: 50px;
    padding: 0 10px;
  }
  /deep/ .van-sticky {
    padding-right: 50px;
    &::after {
      content: "+";
      position: absolute;
      width: 51px;
      height: 44px;
      background-color: #ccc;
      top: 0;
      right: 0;
      text-align: center;
      line-height: 42px;
      font-size: 35px;
    }
  }
}
</style>